import React,{ Component,PropTypes } from 'react'
import { connect } from 'react-redux'
import { addTodo,completeTodo,setVisibilityFilter,VisibilityFilters } from '../actions/Todos'
import AddTodo from '../components/Todos/AddTodo'
import TodoList from '../components/Todos/TodoList'
import Footer from '../components/Todos/Footer'

class AppTodos extends Component{
	render(){
		const {dispatch,visibleTodos, visibilityFilter}=this.props
		return(
			<div>
				<AddTodo
					onAddClick={(text)=>dispatch(addTodo(text))}
				/>
				<TodoList
					todos={visibleTodos}
					onTodoClick={
						(index)=>dispatch(completeTodo(index))

					}
				/>
				<Footer 
					filter={visibilityFilter}
					onFilterChange={
						(nextFilter)=>dispatch(setVisibilityFilter(nextFilter))
					}
				/>
			</div>
		)
	}
}
export default AppTodos